<template>
  <view class="goods_list">
    <!-- 1.搜索框 -->
    <yg-search></yg-search>

    <!-- 2.tab栏 -->
    <view class="tabs">
      <u-tabs
        :list="tabs"
        :is-scroll="false"
        inactive-color="#666"
        active-color="#eb4450"
        :current="current"
        @change="onTapsChange"
      ></u-tabs>
      <!-- 综合 -->
      <block v-if="current === 0">
        <view class="composite">
          <block v-for="item in goods" :key="item.goods_id">
            <u-line color="#ccc" />
            <!-- 使用单个商品组件 -->
            <goods-item :item="item"></goods-item>
          </block>
          <!-- 没有更多数数据提示 -->
        <view v-if="!hasMore">没有更多数据</view>
        </view>
      </block>
      <block v-else-if="current === 1">
        <view class="Sales">销量</view>
      </block>

      <block v-else-if="current === 2">
        <view class="price">价格</view>
      </block>
    </view>
  </view>
</template>

<script>
import GoodsItem from '../../components/goodsItem/goodsItem.vue';
import ygSearch from "../../components/ygSearch/ygSearch.vue";
//总页数
let TotalPage = 0;
// 请求参数
const params = {
  //关键字
  query: "",
  // 分类id
  cid: "",
  // 页码
  pagenum: 1,
  // 页容量 一页有几条数据
  pagesize: 10,
};
export default {
  data() {
    return {
      tabs: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      // 商品列表
      goods: [],
      hasMore:true
    };
  },
  components: { ygSearch, GoodsItem },
  // id =5 开发的时候 暂时先写死 后期要删除的!!!
  async onLoad({ id }) {
    params.cid = id;
    this.getGoods();
  },
  onReachBottom() {
    /**
     * 滚动条触底 可以加载下一页数据
     */
    // 1 判断还有没有下一页数据
    if (params.pagenum >= TotalPage) {
      //没有数据
      // console.log("没有更多数据");
      uni.showToast({
        title: "没有更多数据了",
        duration: 1000,
        icon: "none",
        mask: true,
      });
      this.hasMore = false
    } else {
      // 有下一页数据  修改当前的页码
      params.pagenum++;
      // 发送真正的请求
      this.getGoods();
    }
  },
  /**
   * 下拉刷新时触发
   */
  async onPullDownRefresh() {
    this.hasMore = true
    //重置数组
    this.goods = []
    //重置页码
    params.pagenum = 1
    //重新发送请求  异步
    await this.getGoods();
    //关闭下拉效果
    uni.stopPullDownRefresh();
  },
  methods: {
    onTapsChange(index) {
      //   console.log(index)
      this.current = index;
    },
    async getGoods() {
      const { message } = await this.$u.api.getGoods(params);
      // console.log(message);
      // 当做分页的时候 goods数组 应该要不断追加数据  拼接数组
      this.goods = [...this.goods, ...message.goods];

      //计算页码数
      TotalPage = Math.ceil(message.total / params.pagesize);
      // console.log(TotalPage)
    },
  },
};
</script>

<style lang="scss">

</style>